<template>
	<private_dialog ref="dialogRef" width="600" :beforeClose="dialogCancel">
		<el-form ref="formRef" :rules="fromRule" :model="form" inline label-width="auto">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="角色名称" prop="name" class="w-100">
						<el-input v-model="form.name" placeholder="请输入角色名称" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="角色标识" prop="key" class="w-100">
						<el-input v-model="form.key" placeholder="请输入角色标识" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="角色状态" prop="status" class="w-100">
						<el-select v-model="form.status" placeholder="请选择角色状态">
							<el-option label="启用" value="enable" />
							<el-option label="禁用" value="disable" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="角色权限" prop="permissions" class="w-100">
						<el-tree-select
							v-model="form.permissions"
							:data="permissionTree"
							:props="{ label: 'permission_name' }"
							node-key="_id"
							multiple
							check-strictly
							show-checkbox
							placeholder="请选择角色权限"
						/>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</private_dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import private_dialog from "@/components/confirmDialog/index.vue";
import { addRoleApi, editRoleApi } from "@/api/system/role";
import { getPermissionTreeApi } from "@/api/system/permission";

const props = defineProps({
	fullData: { type: Array, required: true },
});
const emit = defineEmits(["updateFullData"]);

// DialogRef
const dialogRef = ref();
// Dialog关闭时
const dialogCancel = () => {
	formRef.value.resetFields();
	formRef.value.clearValidate();

	form.value = { name: "", key: "", status: "enable", pid: "", sort: 1 };
};
// 此次打开的Dialog类型
const currentDialogType = ref("add");

// 表单Ref
const formRef = ref();
// 表单数据
const form = ref({ name: "", key: "", status: "enable", permissions: [] });
// 表单校验规则
const fromRule = {
	name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
	key: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
};

// 获取权限列表
const permissionTree = ref([]);
const getPermissionListApi = async () => {
	try {
		const permissionRes = await getPermissionTreeApi();
		permissionTree.value = permissionRes.data;
	} catch (e) {
		return;
	}
};

onMounted(() => {
	getPermissionListApi();
});

defineExpose({
	open: ({ type = "add", data } = {}) => {
		currentDialogType.value = type;

		dialogRef.value.open({
			title: "角色操作",
			isAsync: true,
			openAfter: () => {
				if (type === "edit") form.value = JSON.parse(JSON.stringify(data));
			},
			confirm: async ({ stopLoading, done }) => {
				// 校验表单
				try {
					await formRef.value.validate();
				} catch (e) {
					return stopLoading();
				}

				try {
					// 添加
					if (type === "add") {
						await addRoleApi(form.value);
					}

					// 编辑
					if (type === "edit") {
						await editRoleApi(form.value);
					}

					done();
				} catch (e) {
					clog;
					return stopLoading();
				}

				emit("updateFullData");
			},
			cancel: () => {},
		});
	},
});
</script>

<style scoped lang="scss">
// 权限选择器,不换行展示.
:deep(.is-near) {
	flex-wrap: nowrap;
	overflow: hidden;
}
</style>
